<template>
    <div class="container">
        <h1>按键修饰符</h1>
        <div class="container_1">
            <label>回车键</label>
            <input @keyup.enter="keyEnter" />
        </div>
        <div class="container_1">
            <label>Tab键</label>
            <input @keyup.tab="keyTab" />
        </div>
        <div class="container_1">
            <label>Delete键</label>
            <input @keyup.delete = "keyDelete" />
        </div>
        <div class="container_1">
            <label>空格键</label>
            <input @keyup.space = "keySpace" />
        </div>
        <div class="container_1">
            <label>上键</label>
            <input @keyup.up = "keyUp" />
        </div>
        <div class="container_1">
            <button @click.right.prevent="handleRightClick">鼠标右键点击</button>
        </div>
    </div>
</template>

<script setup>
const keyEnter = () => {
    alert('回车按下')
}
const keyTab = () => {
    alert('Tab键按下')
}
const keyDelete = () =>{
    alert('删除键按下')
}
const keySpace =() => {
    alert('空格键按下')
}
const keyUp = () => {
    alert('上键按下')
}

const handleRightClick = () => {
    alert('鼠标右键点击')
}
</script>

<style scoped>
.container {
    background-color: rgb(192, 192, 192);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
.container_1 {
    background-color: rgb(216, 216, 216);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
</style>